<template>
  <view class="bg-151518 h100vh padding-0-30" :class="themeClass">
    <!-- #ifdef MP-WEIXIN -->
    <!-- <u-navbar :titleStyle="'{color: #ffffff}'" bgColor="#151518" :placeholder="true" :autoBack="true" leftIconSize="0" leftIconColor="#FFFFFF"></u-navbar> -->
    <!-- #endif -->
    <view style="position: fixed; top: 0px; width: 100%; z-index: 99999">
      <u-icon @click="goBack" color="#988e7a" size="25px" top="60rpx" name="arrow-left"></u-icon>
      <view style="margin-left: 280rpx; margin-top: 10rpx">在线客服</view>
      <!-- <u-navbar title="在线客服" titleStyle="#000" leftIconColor="#988e7a" leftIconSize="25px" bgColor="#151518" :autoBack="true"></u-navbar> -->
    </view>
    <u-gap height="38rpx"></u-gap>
    <view class="bg-272735 border-radius-16" style="padding: 28rpx 20rpx; margin-top: 128rpx" :style="{ backgroundColor: bgC ? '#f3f3f3' : '#272735' }">
      <view class="flex flex-align-center font28">
        <image style="width: 40rpx; height: 40rpx; margin-right: 10rpx" src="@/static/icon_company.png" mode="aspectFill"></image>
        <text class="color-B8B8D1" style="margin-right: 40rpx">公司名称</text>
        <text :style="{ color: bgC ? '#000' : '#f7d593' }" class="color-F7D593">{{ contactInfo.company }}</text>
      </view>
      <u-gap height="42rpx"></u-gap>
      <view class="flex flex-align-center font28">
        <image style="width: 40rpx; height: 40rpx; margin-right: 10rpx" src="@/static/icon_service.png" mode="aspectFill"></image>
        <text class="color-B8B8D1" style="margin-right: 40rpx">客服热线</text>
        <text :style="{ color: bgC ? '#000' : '#f7d593' }" class="color-F7D593">{{ contactInfo.kefu }}</text>
      </view>
      <u-gap height="42rpx"></u-gap>
      <view class="flex flex-align-center font28">
        <image style="width: 40rpx; height: 40rpx; margin-right: 10rpx" src="@/static/icon_qq.png" mode="aspectFill"></image>
        <text class="color-B8B8D1" style="margin-right: 50rpx">客服QQ</text>
        <text :style="{ color: bgC ? '#000' : '#f7d593' }" class="color-F7D593">{{ contactInfo.qq }}</text>
      </view>
    </view>
    <u-gap height="46rpx"></u-gap>
    <!-- <view class="flex flex-center btn" @click="tokefu">在线客服咨询</view> -->
    <button class="flex flex-center btn" type="default" open-type="contact">在线客服咨询</button>
    <u-gap height="40rpx"></u-gap>
    <view @click="handlerCode('wx_kf')" class="flex flex-center flex flex-center btn">添加微信咨询</view>
    <u-gap height="40rpx"></u-gap>
    <view @click="handlerCode('wx_sw')" class="flex flex-center flex flex-center btn">商务微信咨询</view>
    <u-popup :show="show" mode="center" round="16" :closeOnClickOverlay="true" @close="show = false">
      <view class="padding-32-30 border-radius-16 bg-w">
        <image style="width: 400rpx; height: 400rpx" :src="imgCode" mode="aspectFill"></image>
        <u-gap height="12rpx"></u-gap>
        <view class="font32 color-3D3D3D">扫码添加您的专属{{ codeType == 'wx_sw' ? '商务微信' : '客服微信' }}</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      contactInfo: {},
      imgCode: '',
      codeType: '',
      currentTheme: '', //背景色
      bgC: false
    };
  },
  onLoad() {
    this.currentTheme = this.getTheme();
    this.getContactInfo();
  },
  onShow() {
    var that = this;
    this.bgC = that.app.background;
    this.currentTheme = this.getTheme();
  },
  // 计算属性返回css样式
  computed: {
    themeClass() {
      return `theme-${this.currentTheme}`;
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    // 获取本地样式
    getTheme() {
      return uni.getStorageSync('theme') || 'dark';
    },
    handlerCode(type) {
      this.codeType = type;
      this.imgCode = this.app.apiHost + this.contactInfo[type];
      this.show = true;
    },
    getContactInfo() {
      var that = this;
      uni.request({
        url: that.app.apiHost + '/getSiteConfig',
        method: 'POST',
        header: { Authorization: 'bearer ' + that.app.getAuthCode() },
        success: (res) => {
          console.log(res.data);
          this.contactInfo = res.data.data;
        },
        fail(res) {
          console.log(res);
        }
      });
    },
    tokefu() {
      uni.navigateTo({
        url: '/pages/common/webView?url=' + this.app.kefu
      });
    }
  }
};
</script>

<style lang="scss">
/* 定义主题样式 */
.theme-dark {
  background-color: #151518;
  // color: #fff !important;
  color: #fcecc9 !important;
}

.theme-light {
  background-color: #fff;
  color: #000;
}
.color-B8B8D1 {
  color: #b8b8d1;
}
.color-F7D593 {
  color: #f7d593;
}
.btn {
  width: 690rpx;
  height: 90rpx;
  background: linear-gradient(360deg, #f6c478 0%, #f8db9d 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  opacity: 1;
  font-size: 32rpx;
  color: #262626;
}
</style>
